<template>
    <div class="mine">
        <div class="mine-title" @click="mineInfoShow">
            <div class="left">
                <img class="mine-avatar" :src="pic" alt="" />
            </div>
            <div class="right">
                <h6 class="title-name">{{nickname}}</h6>
                <span class="title-phone">手机号：{{phoneNum}}</span>
            </div>
            <i class="mine-more"></i>
        </div>
        <div class="mine-container">
            <!-- 门票 -->
            <!-- <div class="mine-ticket" @click="mineTicketShow">
                <i class="icon ticket-icon"></i>
                <span class="text">我的门票</span>
                <i class="mine-more"></i>
            </div> -->
            <!-- 报名 -->
            <div class="mine-apply" @click="mineApplyShow">
                <i class="icon apply-icon"></i>
                <span class="text">我的报名</span>
                <i class="mine-more"></i>
            </div>
            <!-- 培训 -->
            <div class="mine-train" @click="mineCollectShow">
                <i class="icon train-icon"></i>
                <span class="text">我的活动</span>
                <i class="mine-more"></i>
            </div>
            <!-- 场馆 -->
            <div class="mine-venue" @click="mineVenueShow">
                <i class="icon venue-icon"></i>
                <span class="text">我的场馆</span>
                <i class="mine-more"></i>
            </div>
            <!-- 收藏 -->
            <div class="mine-collect" @click="mineLoveShow">
                <i class="icon collect-icon"></i>
                <span class="text">我的收藏</span>
                <i class="mine-more"></i>
            </div>
            <!-- 志愿 -->
            <!-- :to="'/volunteerDetail/' + ztteamid" -->
            <!-- <div class="mine-volunteer" @click="mineServiceShow">
                <i class="icon volunteer-icon"></i>
                <span class="text">志愿服务</span>
                <i class="mine-more"></i>
            </div> -->
        </div>
        <mine-info ref="mineInfoFlag" :memberinfo="memberinfo"></mine-info>
        <mine-ticket ref="mineTicketFlag"></mine-ticket>
        <mine-apply ref="mineApplyFlag"></mine-apply>
        <mine-collect ref="mineColletFlag"></mine-collect>
        <mine-venue ref="mineVenueFlag"></mine-venue>
        <mine-love ref="mineloveFlag"></mine-love>
        <mine-service ref="mineServiceFlag"></mine-service>
    </div>
</template>

<script>
	import axios from 'axios'
    import MineInfo from './components/mine-info/mineInfo'
    import MineTicket from './components/mine-ticket/mineTicket'
    import MineApply from './components/mine-apply/mineApply'
    import MineCollect from './components/mine-collect/mineCollect'
    import MineVenue from './components/mine-venue/mineVenue'
    import MineLove from './components/mine-love/mineLove'
    import MineService from './components/mine-voluteer/mineService'
    import { mapState } from 'Vuex'
    export default {
        data () {
            return {
                phoneNum: "",
				pic:"http://www.banmago.cn/qunyiguan/images/mine-img.jpg",
				nickname:"",
				memberinfo:{},
                ztteamid: "",
                iszyz: 0
            }
        },
        computed: {
            ...mapState({
                phoneVal: 'phoneNumber'
            })
        },
        methods: {
            mineInfoShow () {
                this.$refs.mineInfoFlag.show()
            },
            mineTicketShow () {
                this.$refs.mineTicketFlag.show()
            },
            mineApplyShow () {
                this.$refs.mineApplyFlag.show()
            },
            mineCollectShow () {
                this.$refs.mineColletFlag.show()
            },
            mineVenueShow () {
                this.$refs.mineVenueFlag.show()
            },
            mineLoveShow () {
                this.$refs.mineloveFlag.show()
            },
            mineServiceShow () {
                if (Number(this.iszyz) === 0) {
                    this.$refs.mineServiceFlag.show()
                } else {
                    this.$router.push({
                         path: `/volunteerDetail/${this.ztteamid}`
                    })
                } 
            },
			getuserinfo () {
				axios.post('/api/index.php?g=Api&m=Ucenter&a=getuserinfo', {
					openid: localStorage.getItem("openid"),
					mid: localStorage.getItem("memberid")
				}).then((res) => {
					if (res.data.rescode=='0000') {
						this.phoneNum=res.data.data.phone
						this.pic=res.data.data.pic
						this.nickname=res.data.data.nickname
						this.memberinfo=res.data.data
                        this.ztteamid = res.data.data.ztteamid
                        this.iszyz = res.data.data.iszyz
					}
				}).catch(function (error) {

        		})
			}
        },
        components: {MineInfo,MineTicket,MineApply,MineCollect,MineVenue,MineLove,MineService},
		created () {
			this.getuserinfo();
        }
    }
</script>

<style lang="stylus" scoped>
    .mine
        width: 100%
        height: 100%
        position: relative
        background: #f0eff5
        padding-top: 14px
        overflow: hidden
        box-sizing: border-box
        .mine-title
            width: 100%
            height: 79px
            background: #fff
            padding: 0 20px
            box-sizing: border-box
            display: flex
            align-items: center
            overflow: hidden
            .left
                width: 60px
                height: 60px
                flex: 0 0 60px
                .mine-avatar
                    width: 60px
                    height: 60px
                    border-radius: 50%
            .right
                flex: 1
                margin-left: 15px
                .title-name
                    font-size: 16px
                    color: #000
                .title-phone
                    font-size: 14px
                    color: #888
                    margin-top: 10px
                    display: block
            .mine-more
                width: 20px
                height: 20px
                background: url('./mine-more.png') no-repeat
                background-size: 100% 100%
                flex: 0 0 20px
        .mine-container
            margin-top: 20px
            width: 100%
            height: 160px
            background: #fff
            padding: 0 20px
            box-sizing: border-box
            overflow: hidden
            .mine-ticket,.mine-apply,.mine-venue,.mine-train,.mine-collect,.mine-volunteer
                height: 40px
                border-bottom: 1px solid #eee
                width: 100%
                display: flex
                align-items: center
                box-sizing: border-box
                .ticket-icon
                    background: url('./mine-menpiao.png') no-repeat
                    width: 18px
                    height: 18px
                    background-size: 100% 100%
                    flex: 0 0 18px
                .apply-icon
                    background: url('./mine-baoming.png') no-repeat
                    width: 18px
                    height: 18px
                    background-size: 100% 100%
                    flex: 0 0 18px
                .train-icon
                    background: url('./mine-peixun.png') no-repeat
                    width: 18px
                    height: 18px
                    background-size: 100% 100%
                    flex: 0 0 18px
                .venue-icon
                    background: url('./mine-ditu.png') no-repeat
                    width: 18px
                    height: 18px
                    background-size: 100% 100%
                    flex: 0 0 18px
                .collect-icon
                    background: url('./mine-shoucang.png') no-repeat
                    width: 18px
                    height: 18px
                    background-size: 100% 100%
                    flex: 0 0 18px
                .volunteer-icon
                    background: url('./mine-zhiyuan.png') no-repeat
                    width: 18px
                    height: 18px
                    background-size: 100% 100%
                    flex: 0 0 18px
                .text
                    flex: 1
                    margin-left: 15px
                    font-size: 16px
                .mine-more
                    width: 20px
                    height: 20px
                    background: url('./mine-more.png') no-repeat
                    background-size: 100% 100%
                    flex: 0 0 20px     
</style>